<template>
  <div class="log-table">
    <el-table
      v-loading="loading"
      :data="tableData"
    >
      <el-table-column
        prop="operateTime"
        label="日期"
        width="160"
      >
        <template v-slot="{ row }">
          <div>{{ filtersTime(row.operateTime) }}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="operator"
        label="操作人"
        width="80"
      ></el-table-column>

      <el-table-column
        prop="operateName"
        label="操作"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="operates"
        label="内容"
      >
        <template v-slot="{ row }">
          <div
            class="log-scroll-bar"
            :style="{ '--height': scrollHeight }"
          >
            <ul
              v-if="!row.content"
              class="log-content-box"
            >
              <li
                v-for="(options, index) in row.operates"
                :key="index"
              >
                <span style="color: #999">{{ options.name }}{{ options.old || options.new ? '：' : '' }}</span>
                <span><span>{{ options.old }}</span><span v-if="options.new">
                    <img
                      class="img"
                      style="flex-shrink:0"
                      src=""
                    >
                  </span><span>{{ options.new }}</span></span>
              </li>
            </ul>

            <div
              v-else
              class="log-content-box"
              v-html="row.content"
            ></div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getSystemModelLog } from '@/api/common'

export default {
  name: 'LogList',
  props: {
    data: {
      type: Object || Array,
      default: () => {}
    },
    scrollHeight: {
      type: String,
      default: '200px'
    },
    logId: {
      type: String,
      default: ''
    },
    model: {
      type: String,
      default: ''
    },
    rowData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      loading: false,
      tableData: []
    }
  },
  computed: {
    params() {
      return {
        id: this.logId,
        model: this.model,
        object_type: 'id'
      }
    }
  },
  watch: {
    rowData: {
      handler(newValue, oldValue) {
        this.$nextTick(() => {
          console.log(this.rowData)
          this.tableData = this.rowData
        })
      }
    }
  },
  mounted() {},
  methods: {
    handleOpen() {
      // console.log(this.$attrs, '1122333')
      console.log(this.logId)
      this.loading = false
      this.getSystemModelLog(this.params)
    },
    getSystemModelLog(params) {
      this.loading = true
      getSystemModelLog(params).then((res) => {
        if (res.status_code === 1) {
          this.tableData = res.data.data
          this.loading = false
        } else {
          this.loading = false
        }
      })
    },
    filtersTime(time) {
      if (time.indexOf('-') !== -1) {
        return time
      }
      const date = new Date(time * 1000)
      const d = date.toLocaleDateString()
      const t = date.toLocaleTimeString()
      return `${d} ${t}`
    }
  }
}
</script>
<style lang="scss">
.log-table {
  .el-scrollbar {
    // padding-right: 17px;
    width: 100%;
    height: 100%;
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
  }
  .el-table__row:hover .log-scroll-bar::-webkit-scrollbar-thumb {
    // display: block;
    background-color: rgba(144, 147, 153, 0.3);
  }
  .el-table {
    thead {
      th {
        background-color: #f7f8fa;
      }
    }
  }
}
</style>
<style lang="scss" scoped>
.log-scroll-bar {
  max-height: var(--height);
  overflow: hidden;
  overflow-y: auto;
  padding-right: 7px;
}

.log-table {
  padding: 0 15px;
  ul,
  li {
    list-style: none;
    padding: 0;
    margin: 0;
  }
}
.img {
  width: 20px;
  margin: 0 5px;
}
/*滚动条宽 长,滚动条整体部分，其中的属性有width,height,background,border等。*/

.log-scroll-bar::-webkit-scrollbar {
  width: 7px;
  // display: none;
}

/*滚动条的滑轨背景颜色,可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

.log-scroll-bar::-webkit-scrollbar-track {
  display: none;
  background-color: (0, 0, 0.2);

  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.1);

  border-radius: 5px;
}

/* 滑块颜色 */

.log-scroll-bar::-webkit-scrollbar-thumb {
  background-color: transparent;

  border-radius: 5px;
  opacity: 0;
}

/*滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。*/

.log-scroll-bar::-webkit-scrollbar-button {
  background-color: rgb(185, 164, 68);

  display: none;
}

/* 横向滚动条和纵向滚动条相交处尖角的颜色 */

.log-scroll-bar::-webkit-scrollbar-corner {
  background-color: black;
}
</style>
